<template>
  <div class="userhistory-container">
    <el-descriptions
      direction="vertical"
      :column="4"
      border
      v-for="(item, index) in tableData"
      :key="index"
      class="myDesc"
    >
      <el-descriptions-item label="姓名">{{
        item.patientName
      }}</el-descriptions-item>
      <el-descriptions-item label="疾病名称">{{
        item.diseaseName
      }}</el-descriptions-item>
      <el-descriptions-item label="患病时间">{{
        item.diseaseTime
      }}</el-descriptions-item>
      <el-descriptions-item label="主治医生">
        {{ item.doctorId | tableFilter(doctorOptions) }}
      </el-descriptions-item>
    
    </el-descriptions>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.page"
      :page-sizes="[5, 10, 15, 20, 25]"
      :page-size="pageInfo.limit"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
      class="myStyle"
    >
    </el-pagination>
  </div>
</template>

<script>
import axios from "axios";
export default {
  comName: "病史",
  comSort: 2,
  name: "history",
  data() {
    return {
      tableData: [],
      pageInfo: {
        page: 1,
        limit: 2,
        total: 0,
      },
      doctorOptions: [],
    };
  },
  mounted() {
    this.getdata();
    this.getdoctorList();
  },

  filters: {
    tableFilter(value, options) {
      let index = options.findIndex((item) => {
        return Number(item.doctorId) === Number(value);
      });

      if (index < 0) {
        return "---";
      } else {
        return options[index].doctorName;
      }
    },
  },

  methods: {
seeDetail(row){
  this.dialogVisible=false
},

    getdata() {
      axios({
        url: "/api/user/historylist",
        method: "get",
        params: {
          uId: sessionStorage.getItem("uId"),
          limit: this.pageInfo.limit,
          page: this.pageInfo.page,
        },
        headers: {
          token: sessionStorage.getItem("Token"),
        },
      }).then((res) => {
        console.log(res);
        this.tableData = res.data.list;
        this.pageInfo.total = res.data.total;
      });
    },

    getdoctorList() {
      axios({
        url: "/api/doctor/doctorlist",
        method: "get",
        params: {},
        headers: {
          token: sessionStorage.getItem("Token"),
        },
      }).then((res) => {
        // console.log(res);
        this.doctorOptions = res.data.list;
        console.log("55", this.doctorOptions);
      });
    },

    // 每页多少条切换
    handleSizeChange(value) {
      this.pageInfo.limit = value;
    },
    // 当前页码的切换
    handleCurrentChange(value) {
      this.pageInfo.page = value;
    },
  },
};
</script>

<style lang="scss" scoped>
.userhistory-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 5px;

.myDesc {
    width: 90%;
    margin-top: 15px;
    margin-bottom: 15px;
    /deep/ .el-descriptions__body {
      .el-descriptions__table {
        tbody {
          tr{
            font-size: 15px;
            color: rgb(43, 42, 42);
          }
          tr:first-child {
            th {
               color: rgb(43, 42, 42);
              background: rgb(183, 198, 240);
            }
          }
        }
      }
    }
  }


  .myStyle {
    margin-top: 30px;
  }
}
</style>
    